<template>
    <div class="card">

        <!--电压-->
        <el-card v-if="props.showTransformer"
            style="padding: 10px;">
            <el-row gutter="24">
                <el-col :span="24">技术参数</el-col>
            </el-row>
            <div class="line"></div>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号 :</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">相数/绕组 :</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电压kv :</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">额定容量kVA:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">空载损耗kW:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[4]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">负载损耗kW:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[5]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">绝缘介质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[6]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">设备寿命N:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[7]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">绝缘介质重kg:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[8]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">设备生产碳排放量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[10]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">重量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{props.dataTransformer[11]}}</el-col>
            </el-row>
        </el-card>
        <!--电容-->
        <el-card v-if="props.showCapacitance">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">额定容量kVA:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电压kv:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">损耗kW:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电流A:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[4]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">介质损耗角正切值:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[5]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">冷却介质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[6]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">冷却介质重kg:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[7]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">设备寿命N:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[8]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">设备生产制造碳排放量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[9]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">重量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataCapacitance[10]}}</el-col>
            </el-row>
        </el-card>

        <!--电抗-->
        <el-card v-if="props.showReactance">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">额定容量kVA:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电压kv:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">损耗kW:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电流A:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[4]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">电抗率%:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[5]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">冷却介质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[6]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">冷却介质重kg:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[7]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">设备寿命N:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[8]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">设备生产制造碳排放量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[9]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">重量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataReactance[10]}}</el-col>
            </el-row>
        </el-card>

        <!--硬导体-->
        <el-card v-if="props.showHardConductor">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">规格:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">材质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">载流量A:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">电阻率Ω/km:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[4]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">单重kg/m%:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataHardConductor[5]}}</el-col>
            </el-row>
        </el-card>

        <!--软导体-->
        <el-card v-if="props.showSoftConductor">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataSoftConductor[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">规格:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataSoftConductor[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">材质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataSoftConductor[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">电阻率Ω/km:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataSoftConductor[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">单重kg/m%:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataSoftConductor[4]}}</el-col>
            </el-row>
        </el-card>

        <!--GIS-->
        <el-card v-if="props.showGIS">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">型号:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[0]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">额定电压kv:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[1]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">额定电流A:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[2]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">损耗kW:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[3]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">气体介质:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[4]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">气体年泄露率%/年:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[5]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">设备寿命N:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[6]}}</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">设备生产制造碳排放量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[7]}}</el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-top: 5px;">重量t:</el-col>
                <el-col :span="6"
                    style="padding-top: 5px;">{{dataGIS[8]}}</el-col>
            </el-row>
        </el-card>

    </div>

</template>


<script setup>
import { defineProps, onMounted } from 'vue'

//----------------------------------------------------数据定义
const props = defineProps({
  showTransformer: { type: Boolean, default: true }, //电压
  showCapacitance: { type: Boolean, default: false }, //电容
  showReactance: { type: Boolean, default: false }, //电抗
  showHardConductor: { type: Boolean, default: false }, //硬导体
  showSoftConductor: { type: Boolean, default: false }, //软导体
  showGIS: { type: Boolean, default: false }, //GIS

  dataTransformer: { type: Array, default: [] }, //电压数据
  dataCapacitance: { type: Array, default: [] }, //电容数据
  dataReactance: { type: Array, default: [] }, //电抗数据
  dataHardConductor: { type: Array, default: [] }, //硬导体数据
  dataSoftConductor: { type: Array, default: {} }, //软导体数据
  dataGIS: { type: Array, default: {} } //GIS数据
})

//----------------------------------------------------方法实现
//----------------------------------------------------响应

onMounted(() => {
  console.log('props dataTransformer:', props.dataTransformer)
})
</script>

<style lang="scss">
.card {
  .el-card {
    --el-card-padding: 10px;
  }
  .line {
    border: 1px solid rgba(233, 225, 225);
    width: 800px;
  }
}
</style>